﻿@{
    Layout = "~/Areas/Mall/Views/Shared/_HomeLayout.cshtml";
}

<link rel="stylesheet" href="~/Areas/Mall/css/list.css">
<link rel="stylesheet" href="~/Areas/Mall/css/head.css">
<link rel="stylesheet" href="~/Areas/Mall/css/pagination.css" />
<style type="text/css">
    ul, li {
        list-style: none;
    }

    #wrapper {
        width: 900px;
        margin: 20px auto;
    }

    .data-container {
        margin-top: 5px;
    }

        .data-container ul {
            padding: 0;
            margin: 0;
        }

        .data-container li {
            margin-bottom: 5px;
            padding: 5px 10px;
            background: #eee;
            color: #666;
        }
</style>
<div class="location">
    <a href="javascript:history.back(-1);" class="back"><i></i><span>返回上一页</span></a>
    <a href="@Url.Action("Index","Home")"><i></i><span>首页</span></a>
    <span> - 收货地址管理</span>
</div>
<div class="top">
    <input id="txtKeyword" value="" placeholder="请输入订单编号" />
    <button class="search" onclick="paging()"><img src="~/Areas/Mall/image/search.png" width="20" /></button>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="ltable shopping">
    <tbody id="tbodyOrder">
    </tbody>
</table>
<div id="wrapper" class="page">
    <!--#488FCD-->
</div>


<script type="text/javascript" src="~/Areas/Mall/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Areas/Mall/js/pagination.min.js"></script>
<script type="text/javascript">
    //分页
    function paging() {
        $('#wrapper').pagination({
            dataSource: '@Url.Action("OrderList", "Order")',
            locator: 'Data.List',
            totalNumberLocator: function (response) {
                // you can return totalNumber by analyzing response content
                return response.Data.Count;
            },
            pageSize: 10,
            ajax: {
                beforeSend: function () {
                    //dataContainer.html('Loading data from flickr.com ...');
                },
                type: 'POST',
                data: {
                    keyword: $("#txtKeyword").val()
                }
            },
            callback: function (data, pagination) {
                $("#tbodyOrder").empty();
                $(data).each(function (index, order) {
                    $("#tbodyOrder").append(`
                    <tr class="odd_bg">
                        <th colspan="2" width="10%">订单时间:`+ order.OrderTime + `</th>
                        <th width="10%">订单编号:`+ order.Code + `</th>
                        <th width="10%">订单状态:`+ getStatus(order.Status) + getLogistics(order.Status, order.LogisticsCompany, order.LogisticsNumber) + `</th>
                        <th width="10%">订单总金额:`+ order.TotalAmount + `</th>
                        <th width="10%">` + getButton(order.Status, order.Id, order.TotalAmount) + `</th>
                    </tr>`);
                    $(order.Details).each(function (index, detail) {
                        $("#tbodyOrder").append(`
                        <tr>
                            <td align="center">
                                <a target="_blank" href="@Url.Action("Detail", "Commodity")?id=`+ detail.Id + `"">
                                    <img src="`+ detail.CommodityPic +`" />
                                </a>
                            </td>
                            <td align="center" colspan="2"><a target="_blank" href="@Url.Action("Detail", "Commodity")?id=`+ detail.Id + `">`+ detail.CommodityName +`</a></td>
                            <td align="center">￥`+ detail.CommodityMoney +`</td>
                            <td align="center">`+ detail.Number +`</td>
                            <td align="center">￥`+ detail.TotalMoney +`</td>
                        </tr>`)
                    });
                });
            }
        });
    }

    //获取状态
    function getStatus(status) {
        var retStr = "";
        //状态（10-待支付；20-已支付；30-待发货；40-发货成功；90-订单取消）
        switch (status) {
            case 10:
                retStr = "待支付";
                break;
            case 20:
                retStr = "已支付";
                break;
            case 30:
                retStr = "待发货";
                break;
            case 40:
                retStr = "发货成功";
                break;
            case 90:
                retStr = "订单取消";
                break;
            default: break;
        }
        return retStr;
    }

    //获取按钮
    function getButton(status, id, totalAmount) {
        var retStr = "";
        //10-待支付
        if (status == 10) {
            retStr += `<a onclick="cancelOrder(` + id + `)" class="btn cancel">取消</a>`;
            retStr += `&nbsp;&nbsp;<a onclick="shouPay(` + id + `,` + totalAmount + `)" class="btn violet settlement">支付</a>`;
        }
        //90-订单取消
        else if (status == 90) {
            retStr += `<a onclick="delOrder(` + id + `)" class="btn">删除</a>`;
        }
        return retStr;
    }

    //获取物流
    function getLogistics(status, logisticsCompany, logisticsNumber) {
        var retStr = "";
        //40-发货成功
        if (status == 40) {
            retStr += `&nbsp;<a target="_Blank" style="color:blue;" href="https://www.kuaidi100.com/">` + logisticsCompany + `(` + logisticsNumber + `)</a>`;
        }
        return retStr;
    }

    //取消订单
    function cancelOrder(id) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("CancelOrder", "Order")',
            data: {
                "id": id
            },
            success: function (res) {
                if (res.Success) {
                    paging();
                } else {
                    alert(res.Message)
                }
            }
        });
    }

    //删除订单
    function delOrder(id) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("DeleteOrder", "Order")',
            data: {
                "id": id
            },
            success: function (res) {
                if (res.Success) {
                    paging();
                } else {
                    alert(res.Message)
                }
            }
        });
    }

    //支付
    function shouPay(id,totalAmount) {
        $("#spaTotalAmount").text(totalAmount);
        $("#txtOrderId").val(id);
        $(".zhifu").show();
        $('.shopping_bag').find('.hide_shopping').hide();
    }

    $(function () {
        paging();
    })

</script>